<script setup lang="ts">

const props = defineProps<{ assessmentReports: any[] }>()
</script>
<template>
    <div class="show">
        <div class="assessmentReports">
            <div class="assessmentReport">评估报告</div>
            <div class="more">
                <span>查看更多></span>
            </div>
        </div>
        <div class="showMain" v-for="assessmentReport in assessmentReports">
            <div class="reportList">
                <div class="report">
                    <div class="field">报告名称:</div>
                    <div class="text">{{ assessmentReport.reportName }}</div>
                </div>
                <div class="repor">
                    <div class="field">报告时间:</div>
                    <div class="text">{{ assessmentReport.reportTime }}</div>
                </div>
                <div class="repor">
                    <div class="field">报告文件:</div>
                    <div class="text">{{ assessmentReport.reportFile }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.show {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 1px solid rgba(177, 175, 175, 0.199);
}
.showMain {
    display: flex;
    flex-direction: row;
    padding: 0px 10px 10px 10px;
    border-top: 1px solid rgba(185, 179, 179, 0.116);
}

.reportList {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    margin: 5px;
}
:deep(.van-nav-bar) {
    border-radius: 10px;
}
:deep(.van-nav-bar__text) {
    color: rgb(66, 141, 228);
    font-size: 20px;
    font-weight: bolder;
}
.field {
    color: rgba(48, 61, 78);
    line-height: 15px;
    font-size: 14px;
    font-weight: bolder;
}
.text {
    font-size: 14px;
    color: rgba(89, 89, 89);
    line-height: 16px;
}
.report {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
}

.assessmentReports {
    margin-top: 8px;
    display: flex;
    padding: 0 16px 0 16px;
}
.assessmentReport {
    font-size: 17px;
    flex: 1;
}
.more {
    display: flex;
    justify-content: flex-end;
}
.findTime {
    display: flex;
}

.time {
    display: flex;
    flex: 1;
}
.mend {
    display: flex;
    justify-content: flex-end;
    color: red;
}
</style>